import React from "react";
import {Vector as VectorSource} from 'ol/source';
import {Vector} from 'ol/layer';// 图层
import Feature from 'ol/Feature';// 要素
import {Point} from 'ol/geom';
import {fromLonLat} from 'ol/proj';// 坐标系转化
import {XYZ, TileImage} from 'ol/source';
import {MapServer} from './mapServer'
import Select from 'ol/interaction/Select';
import Modify from 'ol/interaction/Modify';
import  WKT  from 'ol/format/WKT';
import Draw from 'ol/interaction/Draw';
import {Circle as CircleStyle, Fill, Stroke, Style,Icon} from 'ol/style';
/**
 * 画多边形
 * @param map
 */
export const drawPolygon = (map: any,callback:any) => {
    try {
        if (map) {
            let select=new  Select();
            map.addInteraction(select);
            let vectorSource = new VectorSource({
                features:[]
            });
            var vectorLayer = new Vector({
                source: vectorSource,
                style: new Style({
                    fill: new Fill({
                        //矢量图层填充颜色，以及透明度
                        color:"red"
                    }),
                    stroke: new Stroke({
                        //边界样式
                        color: '#319FD3',
                        width: 1
                    })
                })
            });
            let draw = new  Draw({
                source: vectorSource,
                stopClick:true,
                freehand:false,
                type: "Polygon"
            });
            map.addInteraction(draw);

            draw.setActive(true);
            draw.on("drawend",function (e) {
                draw.setActive(false);
                var feature=e.feature;
                var wktformat= new WKT();
                callback(wktformat.writeGeometry(feature.getGeometry()));
                // alert(wktformat.writeGeometry(feature.getGeometry()));
            });
            var modify = new  Modify({
                features: select.getFeatures()
            });
            map.addInteraction(modify);
            modify.on("modifyend",function (e) {
                var features=e.features.array_;
                var wktformat= new  WKT();
                // alert(wktformat.writeGeometry(features[0].getGeometry()));//
                callback(wktformat.writeGeometry(features[0].getGeometry()));
            });
            map.addLayer(vectorLayer);
        }
    } catch (e) {

    }
};

